<section class="channel-h5">
  <div class="channel-h5__header">
    <p class="channel-h5__title">男生最爱</p>
  </div>
  <div>
    <div>
      <ul class="list-h5">
        <li v-for="(item,index) in male" :key="item.id" v-if="index === 0">
          <div class="book-h5">
            <div class="book-h5__cover">
              <img :src="item.cover" :alt="item.title" />
              <p class="book-h5__finish">{{item.finish ? '完结' : ''}}</p>
            </div>
            <div class="book-h5__info">
              <div class="book-h5__title">{{item.title}}</div>
              <div class="book-h5__author">{{item.authors}}</div>
              <div class="book-h5__summary">{{item.summary}}</div>
              <div class="book-h5__tag" v-for="tag in item.tags" :key="tag.id">{{tag}}</div>
            </div>
          </div>
        </li>
        <li class="li_no_img" v-for="(item,index) in male" :key="item.id" v-if="index > 0 && index < 9">
          <div class="book-h5 book-h5__no-img">
            <span class="book-h5_no-img__order">0{{index}}</span>
            <div class="book-h5_no-img__info">
              <p class="book-h5_no-img__title">{{item.title}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="channel-h5__footer_next">
      <a href="javascript:;">换一批</a>
      <a href="/male">男生频道</a>
    </div>
  </div>

</section>
